<!DOCTYPE html>
<html>
	<head>
		<head>
			<meta charset="utf-8">
			<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
			<title>积分列表商城</title>
			<link rel="stylesheet" type="text/css" href="../css/public.css" />
			<link rel="stylesheet" type="text/css" href="../css/topbo_public.css" />
			<link rel="stylesheet" type="text/css" href="../css/first-page.css" />
			<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/mock.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/databese.js" type="text/javascript" charset="utf-8"></script>
		</head>
	</head>
	<body>
		<div class="list-integral">
			<div class="toop-public space-between">
				<a href="#" class="reverse">
					<img src="../img/reverse.svg">
				</a>
				<h3 class="title">积分商城列表</h3>
				<div class="function">
					<img src="../img/function.png">
				</div>
			</div>
			<div class="lisin-mine space-around">
				<p class="left">我的积分</p>
				<p>历史兑换</p>
			</div>
			
			<div class="into-content">
				<div class="top space-between">商品兑换
					<div class="image">
						<img src="../img/reverse02.svg" class="reverse">
					</div>
				</div>
				<ul class="list-commodity flex" id="list-commodity">
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
				</ul>
			</div>
			<a href="#" class="return-top">
				<img src="../img/to-top.svg" class="to-top">
			</a>
		</div>
		<script type="text/javascript">
			function commodity() {
				mock.comList.forEach(function(obj, index) {
					let litCommodit = document.getElementById('list-commodity');
					let convert = document.getElementsByClassName("convert");
					let imgs = litCommodit.getElementsByClassName('imgs');
					let yellow = litCommodit.getElementsByClassName('yellow');
					let text = litCommodit.getElementsByClassName('text');
					let price = litCommodit.getElementsByClassName('price');
			
					imgs[index].src = obj.listcom;
					yellow[index].innerHTML += obj.listyello;
					text[index].innerHTML += obj.listtext;
					price[index].innerHTML += obj.listprice;
					convert[index].innerHTML += '兑换';
			
				})
			}
			commodity(); //商品列表动态创建
		</script>
	</body>
</html>
